<script>

import { mapState, mapMutations } from 'vuex';
export default {
  data() {
    return {
      menus: []
    }
  },
  computed: {
    ...mapState(['tableTabsValue', 'editableTabs']),

    changetableTabsValue: {
      get: function () {
        return this.tableTabsValue;
      },
      set: function (value) {
        this.edittableTabsValue(value);
      }
    }
  },
  methods: {
    ...mapMutations(['setOutUser',]),
    ...mapMutations(['addTab', 'clickTab', 'removeTab', 'edittableTabsValue']),
    out() {
      //sessionStorage.clear();
      this.setOutUser();
      //替换
      this.$router.replace('/login');
    }

    , headHandleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
    , handleSelect(key, keyPath) {
      let menu = this.menus.filter(v => v.menuID == key)[0];
      this.addTab(menu);
    }

    , getMenus() {
      this.axios({
        method: 'get',
        url: 'Menus'
      }).then(response => {
        this.menus = response;
      })
    }
  }
  , created() {
    this.getMenus()
  },
}
</script>

<template>
  <div>
    <el-container style="height: 100vh;">
      <el-header height="">
        <!-- Header content -->
        <!-- <button @click="out">退出登录</button> -->

        <el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal"
          @select="headHandleSelect" background-color="#545c64"
          text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4"><a href="https://www.ele.me"
              target="_blank">订单管理</a></el-menu-item>
        </el-menu>

      </el-header>

      <el-container style="padding: 0px 20px;">
        <el-aside width="200px" style="background-color:#545c64">
          <!-- Aside content -->

          <el-menu :default-active="tableTabsValue"
            class="el-menu-vertical-demo" @select="handleSelect"
            background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu v-if="item.parentID==0" :index="item.menuID+''"
              v-for="item in menus" :key="item.menuID">
              <!-- 具名 title  一级菜单的名字-->
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.menuName  }}</span>
              </template>

              <!-- 二级菜单 -->

              <el-menu-item v-if="menu.parentID==item.menuID"
                :index="menu.menuID+''" v-for="menu in menus"
                :key="menu.menuID">
                <!-- <i :class="menu.icon"></i> -->
                {{ menu.menuName }}
              </el-menu-item>
            </el-submenu>

          </el-menu>

        </el-aside>
        <el-container>
          <el-main height="">
            <!-- Main content -->
            <!-- 路由视图容器 -->
            <!--  -->
            <el-tabs type="card" v-model="changetableTabsValue" closable
              @tab-remove="removeTab" @tab-click="clickTab">
              <el-tab-pane v-for="item in editableTabs" :key="item.name"
                :label="item.title" :name="item.name">
                <span slot="label"><i :class="item.icon"></i>
                  {{ item.title }}</span>
              </el-tab-pane>
            </el-tabs>

            <router-view></router-view>

          </el-main>
          <el-footer height="">
            <!-- Footer content -->
            底部
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

  </div>
</template>

<style>
/* #app {
  width: 100%;
  margin: 20px auto;
} */
body {
  margin: 0px auto;
}
.el-menu {
  border-right: none;
}
</style>